<template>
	<div class="app-container home">
	  	<el-row :gutter="20">
			<el-col>
				<h2>欢迎使用</h2>
				<h1>华寿后台管理系统</h1>
			</el-col>
	 	</el-row>
		<el-dialog title="修改密码" :visible.sync="showDialog" width="500px" append-to-body :close-on-click-modal="false">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px">
				<div class="red">默认密码登入后必须进行修改，否则无法操作系统功能。</div>
				<el-form-item label="请输入密码" prop="pass" style="width: 400px;">
					<el-input v-model="ruleForm.pass" placeholder="请输入密码" />
				</el-form-item>
				<br/>
				<el-form-item label="请再次输入密码" prop="checkPass" style="width: 400px;">
					<el-input v-model="ruleForm.checkPass" placeholder="请输入密码" />
				</el-form-item>
			</el-form>
			
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</div>
     	</el-dialog>
	</div>
  </template>
  
  <script>
  import { checkDefaultPassword, updatePassword } from "@/api/login";
  
  export default {
	data() {
		var validatePass = (rule, value, callback) => {
			const hasLower = /[a-z]/.test(value);
			const hasUpper = /[A-Z]/.test(value);
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.ruleForm.checkPass !== '') {
					if (!hasLower || !hasUpper) {
						callback(new Error('密码必须包含大小写字母和数字'));
					} else {
						callback();
					}
					this.$refs.ruleForm.validateField('checkPass');
				}
				callback();
			}
		};
		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.ruleForm.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};
		return {
			ruleForm:{pass: '',checkPass: ''},
			rules: {
				pass: [{ validator: validatePass, trigger: 'blur' }],
				checkPass: [{ validator: validatePass2, trigger: 'blur' }]
			},
			showDialog:false
		};
	},
	created(){
		this.checkPassword()
	},
	methods:{
		checkPassword(){
			checkDefaultPassword().then(res => {
				if(res.data == 1){
					this.showDialog = true
				}
			})
		},
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					updatePassword({"password": this.ruleForm.pass}).then(res => {
						this.$modal.msgSuccess("修改成功");
						let that = this
						setTimeout(() => {
							that.$store.dispatch('LogOut').then(() => {
								location.href = '/index';
							})
						},2000)
					})
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
	}
};
</script>
	
<style scoped lang="scss">
	h1{text-align: center;font-size: 6em;font-weight: bold;
		color: transparent; /* 设置文字颜色为透明 */
		background-image: linear-gradient(to right, #30bbeb, #1d25a5); /* 设置背景为渐变色 */
		-webkit-background-clip: text; /* WebKit 浏览器专用属性，使背景剪切至文本 */
		background-clip: text; }
	.red{color: #ef4141;font-size: 12px;margin: 0 0 30px 30px;}
</style>
  
  